Виджеты. Buttons GestureDetector

➡️Ссылка на репозиторий с кодом этого урока

Обработка жестов

Обработка жестов во Flutter позволяет приложениям реагировать на различные действия пользователя, такие как нажатия, удержания, перетаскивания и масштабирование. Для реализации этой функциональности используются виджеты, способные обнаруживать и обрабатывать жесты. Основными из них являются GestureDetector и InkWell

GestureDetector

Это невидимый виджет, который перехватывает события жестов и позволяет выполнять определённые действия в ответ на них.

onTap: Одиночное нажатие.
onDoubleTap: Двойное нажатие.
onLongPress: Длительное нажатие.
onTapDown: Нажатие вниз.
onTapUp: Отпускание после нажатия.
onTapCancel: Отмена нажатия.
onPanStart: Начало перемещения.
onPanUpdate: Обновление позиции при перемещении.
onPanEnd: Завершение перемещения.
onScaleStart: Начало масштабирования.
onScaleUpdate: Обновление при масштабировании.
onScaleEnd: Завершение масштабирования.

class GestureDetectorExample extends StatefulWidget {  
  @override  
  State<GestureDetectorExample> createState() => _GestureDetectorExampleState(); 
}  
  
class _GestureDetectorExampleState extends State<GestureDetectorExample> {  
  String message = "Тыкай по картинке";  
  
  _changeMessage(String newMessage) {  
    setState(() {  
      message = newMessage;  
    });  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: [  
        Text(message, style: TextStyle(fontSize: 18)),  
        SizedBox(height: 20),  
        
        GestureDetector(  
          onTap: () => _changeMessage("onTap: Нажатие на объект"),  
          onDoubleTap: () => _changeMessage("onDoubleTap: Двойное нажатие"),  
          onLongPress: () => _changeMessage("onLongPress: Долгое нажатие"),  
          onPanUpdate: (details) => _changeMessage("${details.delta}"),  
  
          child: CircleAvatar(  
            backgroundImage: AssetImage("assets/images/pro.webp"),  
            radius: 150,  
          ),  
        ),  
      ],  
    );  
  }  
}

                  

InkWell

Это виджет из библиотеки Material, который реагирует на нажатия, показывая эффект "чернильного всплеска" (ripple effect). Он часто используется для создания интерактивных элементов с визуальной обратной связью

Для корректной работы InkWell необходимо, чтобы он находился внутри виджета, предоставляющего эффект "чернильного всплеска". Обычно это Material.

class InkWellExample extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Material(  
        borderRadius: BorderRadius.circular(12),  
        child: InkWell(  
          borderRadius: BorderRadius.circular(12),  
          splashColor: Colors.green[300],  
          onTap: () {},  
          child: SizedBox(  
            width: 200,  
            height: 200,  
            child: Center(child: Text('InkWell')),  
          ),  
        ),  
      ),  
    );  
  }  
}

                  

Параметры виджета InkWell

onHighlightChanged: Вызывается при изменении состояния подсветки кнопки.
onHover: Обработчик события наведения курсора (для десктопа и веба).
mouseCursor: Курсор мыши при наведении
focusColor: Цвет при фокусировке на виджете.
hoverColor: Цвет при наведении курсора.

highlightColor: Цвет выделения при нажатии.
overlayColor: Цвет эффекта поверх виджета при взаимодействии.
splashColor: Цвет "чернильного всплеска" при нажатии.
splashFactory: Фабрика, создающая эффект "всплеска"

radius: Радиус области "всплеска" при нажатии.
borderRadius: Радиус закругления границ "всплеска".
customBorder: Форма области "всплеска" (например, StadiumBorder()).
enableFeedback: использовать ли звуковую и тактильную обратную связь.

focusNode: Узел фокуса для работы с клавиатурой.
canRequestFocus: Может ли InkWell получать фокус клавиатуры.
onFocusChange: Вызывается при изменении состояния фокуса.
autofocus: Должен ли виджет автоматически получать фокус.
statesController: Контроллер для управления состояниями
hoverDuration: Длительность анимации наведения курсора